<template>
	<view class="template-login">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back'>
				<text class='icon tn-icon-left' @click="goBack"></text>
				<text class='icon tn-icon-home-capsule-fill' @click="goHome"></text>
			</view>
		</tn-nav-bar>

		<view class="login">
			<!-- 顶部背景图片-->
			<view class="login__bg login__bg--top">
				<image class="bg" src="http://res.sunlee.icu/2023-07/20/fa5d778890ba437dbe5896f7852dca55.gif"
					mode="aspectFill">
				</image>
			</view>

			<view class="login__wrapper">
				<!-- 登录/注册切换 -->
				<view
					class="login-sussuspension login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
					<view class="login__mode__item tn-flex-1"
						:class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
						登录
					</view>
					<view class="login__mode__item tn-flex-1"
						:class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
						注册
					</view>

					<!-- 滑块-->
					<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
				</view>

				<!-- 输入框内容-->
				<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
					<!-- 登录 -->
					<view class="tn-flex">
						<view class=" login__mode__item_l tn-text-lg tn-color-white">
							{{currentModeIndex === 1?'邮箱注册':loginType===0?'微信登录':'邮箱登录'}}
						</view>
					</view>


					<block v-if="currentModeIndex === 0">
						<block v-if="loginType === 0">

						</block>

						<block v-if="loginType === 1">
							<view
								class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
								<view class="login__info__item__input__left-icon">
									<view class="tn-icon-email"></view>
								</view>
								<view class="login__info__item__input__content">
									<input v-model="loginEmailParam.email" maxlength="20"
										placeholder-class="input-placeholder" placeholder="请输入登录邮箱" />
								</view>
							</view>

							<view
								class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
								<view class="login__info__item__input__left-icon">
									<view class="tn-icon-lock"></view>
								</view>
								<view class="login__info__item__input__content">
									<input v-model="loginEmailParam.password" :password="!showPassword"
										placeholder-class="input-placeholder" placeholder="请输入登录密码" />
								</view>
								<view class="login__info__item__input__right-icon"
									@click="showPassword = !showPassword">
									<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
								</view>
							</view>
						</block>
					</block>
					<!-- 注册 -->
					<block v-if="currentModeIndex === 1">
						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-email"></view>
							</view>
							<view class="login__info__item__input__content">
								<input v-model="registerEmailParam.email" maxlength="64"
									placeholder-class="input-placeholder" placeholder="请输入注册邮箱" />
							</view>
						</view>

						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-code"></view>
							</view>
							<view
								class="login__info__item__input__content login__info__item__input__content--verify-code">
								<input v-model="registerEmailParam.captcha" type="number"
									placeholder-class="input-placeholder" placeholder="请输入验证码" maxlength="6" />
							</view>
							<view class="login__info__item__input__right-verify-code" @tap.stop="getEmailCode">
								<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx"
									width="100%" shape="round">{{ tips }}</tn-button>
							</view>
						</view>

						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-lock"></view>
							</view>
							<view class="login__info__item__input__content">
								<input v-model="registerEmailParam.password" maxlength="20" :password="!showPassword"
									placeholder-class="input-placeholder" placeholder="请输入登录密码" />
							</view>
							<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
								<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
							</view>
						</view>
					</block>

					<view v-if="currentModeIndex === 0 && loginType===0"
						class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover"
						:hover-stay-time="150" @click="openWechatAuthModal">一键登录
					</view>

					<view v-else-if="currentModeIndex === 0 && loginType===1"
						class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover"
						:hover-stay-time="150" @click="toEmailLoginReq">登录</view>

					<view v-else-if="currentModeIndex===1" class="login__info__item__button tn-cool-bg-color-7--reverse"
						hover-class="tn-hover" :hover-stay-time="150" @click="submitRegisterEmailData">注册</view>

					<view v-if="currentModeIndex === 0" @click="tn('/pageA/resetPassword/resetPassword')"
						class="login__info__item__tips">忘记密码?</view>
				</view>

				<!-- 其他登录方式 -->
				<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">

					<view class="tn-padding-sm tn-margin-xs" @click="switchWechatLogin">
						<view
							class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
							<view class="tn-icon-wechat-fill"></view>
						</view>
					</view>

					<view class="tn-padding-sm tn-margin-xs" @click="switchEmailLogin">
						<view
							class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
							<view class="tn-icon-email-fill"></view>
						</view>
					</view>

				</view>
			</view>

		</view>


		<!-- 微信授权窗口 -->
		<wx-user-info-modal v-model="showWechatAuthModal" @updated="updatedUserInfoEvent" />
		<!-- 验证码倒计时 -->
		<tn-verification-code ref="code" uniqueKey="login-demo-3" :seconds="60" @change="codeChange" />
	</view>
</template>

<script>
	import WxUserInfoModal from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue';
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js';
	import {
		toWxMpLogin,
		sendRegisterEmailCaptcha,
		submitRegisterEmail,
		toEmailLogin
	} from '@/api/auth.js';

	import validator from '@/utils/validateUtil.js';
	import ws from '@/api/websocket.js'

	import {
		uploadAvatar
	} from '@/utils/uploadUtil.js'

	export default {
		name: 'login',
		mixins: [template_page_mixin],
		components: {
			WxUserInfoModal
		},
		data() {
			return {
				showWechatAuthModal: false,
				// 登录类型: 0微信(默认) 1邮箱
				loginType: 0,
				// 当前选中的模式
				currentModeIndex: 0,
				// 模式选中滑块
				modeSliderStyle: {
					left: 0
				},
				// 是否显示密码
				showPassword: false,
				// 倒计时提示文字
				tips: '获取验证码',
				wxLoginCode: null,
				registerEmailParam: {
					code: null,
					email: null,
					captcha: null,
					password: null
				},
				loginEmailParam: {
					email: null,
					password: null
				},
				loginEmailParamRule: {
					// 字段名称
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: ['blur'],
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur'],
					}]
				}
			}
		},
		watch: {
			currentModeIndex(value) {
				const sliderWidth = uni.upx2px(476 / 2)
				this.modeSliderStyle.left = `${sliderWidth * value}px`
			}
		},
		onLoad() {
			this.registerEmailParam.code = Date.now().toString()
		},
		methods: {
			loginSuccHandler(data) {
				// 存储用户信息
				this.$t.vuex('vuex_user', data)
				// 登录后需刷新消息列表
				this.$t.vuex('vuex_user_msg_list_refresh', true)
				// 连接websocket
				ws.connectWebSocket()
				// 登录成功后，校验好友邀请
				this.handlerFromUser(0)
				// 跳回原本页面
				uni.showToast({
					title: '登录成功',
					icon: 'success',
					duration: 1000
				}).then(succRes => {
					uni.navigateBack({
						fail() {
							// 跳转到上一页,失败则到首页
							uni.switchTab({
								url: "/pages/index/index"
							})
						}
					})
				})
			},
			// 获取到的用户信息
			updatedUserInfoEvent(info) {
				const _this = this

				uploadAvatar(info.avatar).then(fileUrl => {
					// 校验文件
					if (!fileUrl) {
						return
					}
					// 封装登录参数
					let data = {
						code: _this.wxLoginCode,
						username: info.nickname,
						headImg: fileUrl
					}
					// 发起登录请求
					toWxMpLogin(data).then(res => {
						this.loginSuccHandler(res.data)
					})

				})
			},
			// 切换邮箱登录
			switchEmailLogin() {
				this.currentModeIndex = 0
				this.loginType = 1
			},
			// 切换微信登录
			switchWechatLogin() {
				this.currentModeIndex = 0
				this.loginType = 0
				this.openWechatAuthModal()
			},
			// 点击微信一键登录，打开授权窗口
			openWechatAuthModal() {
				const _this = this
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						_this.wxLoginCode = loginRes.code
						_this.showWechatAuthModal = true
					}
				});

			},
			toEmailLoginReq() {
				if (!validator.email(this.loginEmailParam.email)) {
					return
				}
				if (!validator.password(this.loginEmailParam.password)) {
					return
				}
				toEmailLogin(this.loginEmailParam).then(res => {
					this.loginSuccHandler(res.data)
				})
			},
			// 切换模式
			modeSwitch(index) {
				this.currentModeIndex = index
				this.showPassword = false
			},
			// 获取验证码
			getEmailCode() {
				if (this.$refs.code.canGetCode) {
					if (!validator.email(this.registerEmailParam.email)) {
						return
					}
					this.$t.message.loading('正在获取验证码')
					sendRegisterEmailCaptcha({
						email: this.registerEmailParam.email,
						code: this.registerEmailParam.code
					}).then(res => {
						this.$t.message.closeLoading()
						this.$t.message.toast('验证码已经发送')
						this.$refs.code.start()
					})
				} else {
					this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
				}
			},
			submitRegisterEmailData() {
				if (!validator.email(this.registerEmailParam.email)) {
					return
				}
				if (!validator.captcha(this.registerEmailParam.captcha)) {
					return
				}
				if (!validator.password(this.registerEmailParam.password)) {
					return
				}
				submitRegisterEmail(this.registerEmailParam).then(res => {
					this.$t.message.toast('注册成功！')
					// 切换到邮箱登录
					this.currentModeIndex = 0
					this.loginType = 1
					// 清空邮箱和密码
					this.registerEmailParam.email = null
					this.registerEmailParam.password = null
					this.registerEmailParam.captcha = null
				})
			},
			// 获取验证码倒计时被修改
			codeChange(event) {
				this.tips = event
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 悬浮 */
	.login-sussuspension {
		animation: suspension 3s ease-in-out infinite;
	}

	@keyframes suspension {

		0%,
		100% {
			transform: translate(0, 0);
		}

		50% {
			transform: translate(0rem, 1rem);
		}
	}

	.login {
		position: relative;
		height: 100%;
		z-index: 1;

		/* 背景图片 start */
		&__bg {
			z-index: -1;
			position: fixed;

			&--top {
				top: 0;
				left: 0;
				right: 0;
				width: 100%;

				.bg {
					width: 100vw;
					height: 100vh;
					will-change: transform;
				}
			}

			/* &--bottom {
        bottom: -10rpx;
        left: 0;
        right: 0;
        width: 100%;
        margin-bottom: env(safe-area-inset-bottom);
        
        image {
          width: 750rpx;
          will-change: transform;
        }
      } */
		}

		/* 背景图片 end */

		/* 内容 start */
		&__wrapper {
			margin-top: 403rpx;
			width: 100%;
		}

		/* 切换 start */
		&__mode {
			position: relative;
			margin: 0 auto;
			width: 476rpx;
			height: 77rpx;
			background-color: rgba(255, 255, 255, 0.6);
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
			border-radius: 39rpx;

			&__item {
				height: 77rpx;
				width: 100%;
				line-height: 77rpx;
				text-align: center;
				font-size: 31rpx;
				color: #FFFFFF;
				letter-spacing: 1em;
				text-indent: 1em;
				z-index: 2;
				transition: all 0.4s;

				&--active {
					font-weight: bold;
					color: #FFFFFF;
				}
			}

			&__item_l {
				width: 100%;
				text-align: center;
				font-size: 31rpx;
				color: #FFFFFF;
				letter-spacing: 0.3em;
				transition: all 0.4s;
			}

			&__slider {
				position: absolute;
				height: inherit;
				width: calc(476rpx / 2);
				border-radius: inherit;
				box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
				z-index: 1;
				transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
			}
		}

		/* 切换 end */

		/* 登录注册信息 start */
		&__info {
			margin: 0 30rpx;
			margin-top: 105rpx;
			padding: 30rpx 51rpx;
			padding-bottom: 0;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 0.3);
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);

			&__item {

				&__input {
					margin-top: 59rpx;
					width: 100%;
					height: 77rpx;
					border: 1rpx solid #E6E6E6;
					border-radius: 39rpx;

					&__left-icon {
						width: 10%;
						font-size: 44rpx;
						margin-left: 20rpx;
						color: #FFFFFF;
					}

					&__content {
						width: 80%;
						padding-left: 10rpx;

						&--verify-code {
							width: 56%;
						}

						input {
							font-size: 24rpx;
							// letter-spacing: 0.1em;
						}
					}

					&__right-icon {
						width: 10%;
						font-size: 44rpx;
						margin-right: 20rpx;
						color: #AAAAAA;
					}

					&__right-verify-code {
						width: 34%;
						margin-right: 20rpx;
					}
				}

				&__button {
					margin-top: 75rpx;
					margin-bottom: 39rpx;
					width: 100%;
					height: 77rpx;
					text-align: center;
					font-size: 31rpx;
					font-weight: bold;
					line-height: 77rpx;
					letter-spacing: 1em;
					text-indent: 1em;
					border-radius: 39rpx;
					box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
				}

				&__tips {
					margin: 30rpx 0;
					color: #f7f7f7;
					// color: #AAAAAA;
				}
			}
		}

		/* 登录注册信息 end */

		/* 登录方式切换 start */
		&__way {
			margin: 0 auto;
			margin-top: 110rpx;

			&__item {
				&--icon {
					width: 77rpx;
					height: 77rpx;
					font-size: 50rpx;
					border-radius: 100rpx;
					margin-bottom: 18rpx;
					position: relative;
					z-index: 1;

					&::after {
						content: " ";
						position: absolute;
						z-index: -1;
						width: 100%;
						height: 100%;
						left: 0;
						bottom: 0;
						border-radius: inherit;
						opacity: 1;
						transform: scale(1, 1);
						background-size: 100% 100%;
						background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
					}
				}
			}
		}

		/* 登录方式切换 end */
		/* 内容 end */

	}

	/deep/.input-placeholder {
		font-size: 24rpx;
		color: #E6E6E6;
	}

	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}
</style>